<template>
	<view class="page" style="padding-bottom: 20rpx;">
		<!-- <view class="header">
			<image class="back" src="../../static/tian/list.png" mode=""></image>
			<view class="text">{{}}</view>
			<view></view>
		</view> -->
		<customNavbar :title="$t('first.title28')" :ids="'1'" :timeBtnShow="false" />
		<view class="mine_up">
			<view class="up_left">
				<view class="left_left">
					<image class="icon" src="../../static/tian/header.png" mode=""></image>
				</view>
				<view class="left_right">
					<view class="name_up">{{userinfo.level_name}}</view>
					<view class="name_down">{{$t('first.title29')}}：{{userinfo.mobile.substring(0,4)}}****{{userinfo.mobile.substr(-4)}}</view>
					<view class="name_down1" v-if="userinfo.nextlevel == 1">
						<view v-if="$i18n.locale != 'ko'">
							{{$t('first.title123')}} P{{userinfo.nextlevel}}：{{userinfo.nextyeji }}
						</view>
						<view v-if="$i18n.locale == 'ko'">
							P{{userinfo.nextlevel}} 도달: {{userinfo.nextyeji }}
						</view>
					</view>
					<view class="name_down1" v-else>
						<view v-if="$i18n.locale != 'ko'">
							{{$t('first.title123')}} P{{userinfo.nextlevel}}：{{userinfo.nextyeji }}
						</view>
						<view v-if="$i18n.locale == 'ko'">
							P{{userinfo.nextlevel}} 도달:  {{userinfo.nextyeji }}
						</view>
						
					</view>
				</view>
			</view>
			<image @click="golevel" class="up_right" src="../../static/tian/jiangtai.png" mode=""></image>
		</view>
		<!-- <view class="gun">
			<view style="width: 100%;height: 100%;position: relative;">
				<image class="icon" src="../../static/tian/gbg.png" mode=""></image>
				<view class="icon1" :style="{ width: bili+'%'}"></view>
			</view>
		</view> -->
		<view class="mine_center">
			<view class="center_up">
				<view class="up_title">{{$t('first.title30')}}</view>
				<view class="center_down">
					<view class="teamasset">
						<view class="down_item">
							<view class="item_name">{{$t('first.title31')}}</view>
							<view class="item_num">{{userinfo.team_count}}</view>
							<view class="item_title">{{$t('first.title32')}}</view>
						</view>
						<view class="down_item">
							<view class="item_name">{{$t('first.title33')}}</view>
							<view class="item_num">{{userinfo.team_number}}</view>
							<view class="item_title">USDT</view>
						</view>
						<view class="down_item">
							<view class="item_name">{{$t('first.title34')}}</view>
							<view class="item_num">{{userinfo.total_revenue}}</view>
							<view class="item_title">USDT</view>
						</view>
					</view>
					<view class="invite" @click="invita">{{$t('first.title35')}}</view>
				</view>
			</view>
		</view>
		<view class="mine_down">
			<view class="down_list">
				<view class="list_item" :class="select == 0 ? 'active':''" @click="selects(0)">{{$t('first.title36')}}</view>
				<view class="list_item" :class="select == 1 ? 'active':''" @click="selects(1)">{{$t('first.title37')}}</view>
			</view>
			<view class="teamList">
				<view class="tlheader">
					<view class="searchbox">
						<image class="icon" src="../../static/tian/search.png" mode=""></image>
						<input type="text" v-model="ser" :placeholder="$t('first.title38')">
						<view class="btn" @click="search()">{{$t('first.title39')}}</view>
					</view>
				</view>
				<view v-if="select == 0"  >
					<view class="thead">
						<view class="thead_item">{{$t('first.title40')}}</view>
						
						<view class="thead_item">{{$t('first.title42')}}</view>
						<view class="thead_item">{{$t('first.title117')}}</view>
						<view class="thead_item">{{$t('wallet.Charge')}}</view>
						<view class="thead_item">{{$t('wallet.embody')}}</view>
						<view class="thead_item">{{$t('first.title43')}}</view>
					</view>
					
					<view class="tbodyitem" v-if="teamList.length" v-for='(item,index) in teamList' @click="goteam(item.mobile)">
						<view class="thead_item">{{item.mobile.substring(0,3)}}****{{item.mobile.substr(-3)}}({{item.level_name}})</view>
						
						<view class="thead_item">{{item.total}}</view>
						<view class="thead_item">{{item.licai}}</view>
						<view class="thead_item">{{item.r}}</view>
						<view class="thead_item">{{item.t}}</view>
						<view class="thead_item">{{item.performance}}</view>
					</view>
					<u-loadmore
						v-if="teamList.length"
						:status="loadmorestatus" 
						:loading-text="$t('first.title120')" 
						:loadmore-text="$t('first.title119')" 
						:nomore-text="$t('first.title121')"
						height="86rpx"
						marginTop="0"
						marginBottom="0"
					/>
					<view class="nodata" v-if="!teamList.length">
						<image class="icon" src="../../static/tian/zanwu.png" mode=""></image>
						<view class="nodata_text">{{$t('first.title44')}}</view>
					</view>
				</view>
				<view v-else>
					<view class="thead"> 
						<view class="thead_item">{{$t('first.title45')}}</view>
						<view class="thead_item">{{$t('first.title46')}}</view>
						<view class="thead_item">{{$t('first.title47')}}</view>
					</view>
					<view class="nodata" v-if="!rewardsList.length">
						<image class="icon" src="../../static/tian/zanwu.png" mode=""></image>
						<view class="nodata_text">{{$t('first.title44')}}</view>
					</view>
					<view class="tbodyitem" v-if="rewardsList.length" v-for='(item1,index1) in rewardsList'>
						<view class="thead_item">{{item1.memo}}
							<span v-if="item1.extra_data.level && (item1.type == 158)"> {{item1.extra_data.level}}</span>
							<span v-if="item1.extra_data.level && (item1.type == 155)"> {{item1.extra_data.level}}</span>
						</view>
						<view class="thead_item">{{item1.updated_at}}</view>
						<view class="thead_item">{{item1.value}}<span>{{item1.currency.code}}</span></view>
					</view>
					<u-loadmore
						v-if="rewardsList.length"
						:status="loadmorestatus1" 
						:loading-text="$t('first.title120')" 
						:loadmore-text="$t('first.title119')" 
						:nomore-text="$t('first.title121')"
						height="86rpx"
						marginTop="0"
						marginBottom="0"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavbar from '../index/navigationBar.vue'
	import {domain} from '../../config/domain.js'
	export default{
		components: {
			customNavbar
		},
		data(){
			return{
				ser:'',
				userinfo:[],
				teamList:[],
				rewardsList:[],
				select:0,
				page:1,
				lastpage:1,
				pages:1,
				lastpages:1,
				loadmorestatus:'loadmore',
				loadmorestatus1:'loadmore',
				bili:''
			}
		},
		onLoad(e) {
			this.userinfo= uni.getStorageSync('userinfo');
			this.toMyteam();
		    this.toinfo();
			// uni.setNavigationBarTitle({
			// 	title: this.$t('login').register
			// })
		},
		onReachBottom() {
			if(this.select == 0){
				this.page++;
				if(this.page <= this.lastpage){
					this.loadmorestatus = 'loading'
					var url=domain + 'api/new_teamData';
					var mytype='get';
					var data={
						mobile:this.ser, 
						limit:10,
						page:this.page
					};
					let userinfo = uni.getStorageSync('userinfo');
					uni.request({
						url,
						method: mytype,
						data,
						header: {
							'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
							'Lang':uni.getStorageSync('lang'),
							'AUTHORIZATION':userinfo.token,
						},
						success: res => {
							this.loadmorestatus = 'loadmore'
							if(res.data.code==0){
								uni.showToast({
									icon:'none',
									title:res.data.msg
								}); 
							}else{
								this.teamList=[...this.teamList,...res.data.data.data]
							}
						},
						fail: (err) => {
							this.loadmorestatus = 'loadmore'
							console.log(err)
						},
						complete: () => {
							this.loadmorestatus = 'loadmore'
							setTimeout(function() {
								uni.hideLoading();
							}, 1000);
						}
					});
				}else{
					this.loadmorestatus = 'nomore'
				}
			}else{
				this.pages++;
				if(this.pages<=this.lastpages){
					this.loadmorestatus1 = 'loading'
					var url=domain + 'api/new_partnerData';
					var mytype='get';
					let userinfo = uni.getStorageSync('userinfo');
					var data={
						limit:10,
						type:1,
						page:this.pages
					};
					uni.request({
						url,
						method: mytype,
						data,
						header: {
							'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
							'Lang':uni.getStorageSync('lang'),
							'AUTHORIZATION':userinfo.token,
						},
						success: res => {
							this.loadmorestatus1 = 'loadmore'
							if(res.data.code==0){
								uni.showToast({
									icon:'none',
									title:res.data.msg 
								}); 
							}else{
								this.rewardsList=[...this.rewardsList,...res.data.data.data]
							}
						},
						fail: (err) => {
							this.loadmorestatus1 = 'loadmore'
							console.log(err)
						},
						complete: () => {
							this.loadmorestatus1 = 'loadmore'
							setTimeout(function() {
								uni.hideLoading();
							}, 1000);
						}
					});
				}else{
					this.loadmorestatus1 = 'nomore'
				}
			}
		},
		methods:{
			golevel(){
				uni.navigateTo({
					url:'./level'
				})
			},
			selects(e){
				if(e == 0){
					this.page = 1;
					this.toMyteam();
				}else{
					this.pages = 1;
					this.toTeamReward();
				}
				this.select = e;
			},
			goteam(e){
				uni.navigateTo({
					url:'./team?addr=' + e
				})
			},
			invita(){
				uni.navigateTo({
					url:'./invita'
				})
			},
			search(){
				if(this.ser == ''){
					uni.showToast({
						icon:'none',
						title:this.$t('first.title38')
					}); 
					return false;
				}
				var mobi=this.ser
				this.toMyteam(mobi)
			
			},
			toinfo(){
				var url=domain + 'api/user/info';
				var mytype='get';
				let userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						this.userinfo = res.data.data
						this.bili = (res.data.data.nextyeji / res.data.data.nexttotal) * 100
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			toMyteam(mobile){
				var url=domain + 'api/new_teamData';
				var mytype='get';
				var data={
					mobile:mobile, 
					limit:10,
					page:this.page
				};
				let userinfo = uni.getStorageSync('userinfo');
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						if(res.data.code==0){
							uni.showToast({
								icon:'none',
								title:res.data.msg
							}); 
						}else{
							this.teamList=res.data.data.data;
							this.lastpage = res.data.data.last_page
							if(this.lastpage == 1){
								this.loadmorestatus = 'nomore'
							}
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => { 
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			},
			toTeamReward(){
				var url=domain + 'api/new_partnerData';
				var mytype='get';
						
				let userinfo = uni.getStorageSync('userinfo');
				var data={
					limit:10,
					type:1,
					page:this.pages
				};
				uni.request({
					url,
					method: mytype,
					data,
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,//自定义请求头信息
						'Lang':uni.getStorageSync('lang'),
						'AUTHORIZATION':userinfo.token,
					},
					success: res => {
						if(res.data.code==0){
							uni.showToast({
								icon:'none',
								title:res.data.msg 
							}); 
						}else{
							this.rewardsList=res.data.data.data;
							this.lastpages=res.data.data.last_page
							if(this.lastpage == 1){
								this.loadmorestatus1 = 'nomore'
							}
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
					}
				});
			}
		}
	} 
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.mine_up{
		padding: 40rpx;
		padding-bottom: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.up_left{
		display: flex;
		flex: 1;
	}
	.mine_up .up_left .left_left{
		width: 136rpx;
		height: 136rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		box-shadow: 0 20rpx 0.42667rem 0 rgb(0 0 0 / 17%);
		border: 6rpx solid #fff;
		border-radius: 50%;
		overflow: hidden;
	}
	.mine_up .up_left .left_left .icon{
		width: 100%;
		height: 100%;
	}
	.mine_up .up_left .left_right{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.name_up{
		width: 68rpx;
		height: 34rpx;
		background: linear-gradient(304deg,#efad70,#ffe1c0);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #b2660f;
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: center;
	}
	.name_down{
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #989898;
		line-height: 36rpx;
		word-break:break-all;
	}
	.name_down1{
		flex: 1;
		padding: 0 10rpx;
		height: 34rpx;
		background: linear-gradient(304deg,#efad70,#ffe1c0);
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		color: #b2660f;
		display: flex;
		margin-top: 6rpx;
		align-items: center;
		justify-content: center;
		word-break:break-all;
	}
	.mine_center{
		padding: 0 80rpx;
	}
	.center_up{
		height: 176rpx;
		background: url(../../static/tian/minebg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding:40rpx 30rpx;
		box-sizing: border-box;
		position: relative;
	}
	.up_title{
		font-size: 42rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #fff;
	}
	.center_down{
		width: 110%;
		height: 302rpx;
		background: #fff;
		box-shadow: 0 0.16rem 0.48rem 0 rgb(0 0 0 / 8%);
		border-radius: 30rpx;
		position: absolute;
		top: 70%;
		left: -5%;
		right: -5%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.teamasset{
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 30rpx;
	}
	.down_item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.item_name{
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #949494;
		margin-bottom: 12rpx;
		word-break:break-all;
		padding: 0 20rpx;
	}
	.item_num{
		font-size: 28rpx;
		font-family: DINAlternate-Bold,DINAlternate;
		font-weight: 700;
		color: #222;
		margin-bottom: 12rpx;
	}
	.item_title{
		font-size: 24rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #414141;
	}
	.invite{
		width: 246rpx;
		height: 66rpx;
		background: #ffb105;
		border-radius: 36rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #fff;
		text-align: center;
		line-height: 66rpx;
	}
	.mine_down{
		width: 100%;
		background: #fff;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		margin-top: 40%;
	}
	.down_list{
		display: flex;
		justify-content: space-around;
		height: 122rpx;
		line-height: 122rpx;
		border-bottom: 2rpx solid #ebebeb;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #a1a1a1;
	}
	.list_item{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #a1a1a1;
		line-height: 120rpx;
	}
	.list_item.active{
		color: #ffb105;
		border-bottom: 2rpx solid #ffb105;
	}
	.teamList{
		margin-bottom: 40rpx;
	}
	.tlheader{
		margin: 0;
		margin-bottom: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}
	.searchbox{
		width: 100%;
		height: 92rpx;
		border-radius: 20rpx;
		border: 2rpx solid transparent;
		box-sizing: border-box;
		background-color: #f8f8f8;
		align-items: center;
		position: relative;
		display: flex;
		padding: 20rpx 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
	}
	.searchbox .icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.searchbox input{
		display: block;
		box-sizing: border-box;
		flex: 1;
		margin: 0;
		padding: 0;
		color: #323233;
		line-height: inherit;
		text-align: left;
		background-color: transparent;
		border: 0;
		resize: none;
		-webkit-user-select: auto;
		user-select: auto;
		font-size: 28rpx;
	}
	.searchbox .btn{
		font-size: 32rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #fff;
		width: auto;
		height: 66rpx;
		background: #ffb105;
		border-radius: 30rpx;
		text-align: center;
		line-height: 66rpx;
		padding: 0 16rpx;
	}
	.thead{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.thead_item{
		width: 20%;
		min-height: 86rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		font-size: 24rpx;
		font-family: PingFangSC-Semibold,PingFang SC;
		font-weight: 600;
		color: #222;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nodata{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 20px 0;
	}
	.nodata .icon{
		width: 420rpx;
		height: 366rpx;
	}
	.nodata_text{
		font-size: 28rpx;
		font-family: PingFangSC-Regular,PingFang SC;
		font-weight: 400;
		color: #9394bc;
	}
	.tbodyitem{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tbodyitem:nth-child(2n){
		background-color: #ecf0f5;
	}
	
	.up_right{
		width: 180rpx;
		height: 150rpx;
		margin-left: 25rpx;
	}
	.gun{
		width: 100%;
		height: 40rpx;
		position: relative;
		padding: 0 40rpx;
		margin-bottom: 10rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.gun .icon{
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}
	.gun .icon1{
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		border-radius: 30rpx;
		background-color: #ffe19e;
	}
</style>